<template>
	<div class="app-container">
		<!-- 查询和其他操作 -->
		<div class="filter-container">
			<el-input v-model="listQuery.title" clearable class="filter-item" style="width: 180px;" placeholder="标题"/>
			<el-button v-permission="[1]" clearable class="filter-item" type="primary" icon="el-icon-search"
			           @click="handleFilter">查找
			</el-button>
			<el-button v-permission="[1]" class="filter-item" type="primary" icon="el-icon-edit" @click="handleCreate">
				添加
			</el-button>
		</div>

		<!-- 查询结果 -->
		<el-table v-loading="listLoading" :data="list" size="small" element-loading-text="正在查询中。。。" border fit
		          highlight-current-row>

			<el-table-column align="center" width="100px" label="消息编号" prop="id" sortable/>

			<el-table-column align="center" width="200px" label="标题" prop="title"/>

			<el-table-column align="center" label="内容" prop="content"/>
			<el-table-column align="center" width="200px" label="创建时间" prop="createTime">
				<template slot-scope="scope">{{ scope.row.createTime | formatTime }}</template>
			</el-table-column>
		</el-table>

		<pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize"
		            @pagination="getList"/>

		<!-- 添加 -->
		<el-dialog title="添加消息" :visible.sync="dialogFormVisible">
			<el-form ref="dataForm" :rules="rules" :model="dataForm" status-icon label-position="left"
			         label-width="100px" style="width: 400px; margin-left:50px;">
				<el-form-item label="标题" prop="title">
					<el-input v-model="dataForm.title"/>
				</el-form-item>
				<el-form-item label="内容" prop="content">
					<el-input type="textarea" v-model="dataForm.content"/>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取消</el-button>
				<el-button type="primary" @click="createData">确定</el-button>
			</div>
		</el-dialog>

	</div>
</template>

<script>
	import {listMessage, sendMessage} from '@/api/admin'
	import Pagination from '@/components/Pagination' // Secondary package based on el-pagination

	const typeMap = {
		1: '好评',
		2: '中评',
		3: '差评'
	}

	export default {
		name: 'Order',
		components: {Pagination},
		filters: {
			appraiseTypeFilter(status) {
				return typeMap[status]
			}
		},
		data() {
			return {
				list: undefined,
				total: 0,
				listLoading: true,
				listQuery: {
					pageNum: 1,
					pageSize: 20,
					title: undefined
				},
				dataForm: {
					title: undefined,
					content: undefined
				},
				dialogFormVisible: false,
				rules: {
					title: [{required: true, message: '标题不能为空', trigger: 'blur'}],
					content: [{required: true, message: '内容不能为空', trigger: 'blur'}]
				},
				typeMap
			}
		},
		created() {
			this.getList()
		},
		methods: {
			getList() {
				this.listLoading = true
				listMessage(this.listQuery)
					.then(res => {
						this.list = res.data.records
						this.total = res.data.total
						this.listLoading = false
					})
					.catch(() => {
						this.list = []
						this.total = 0
						this.listLoading = false
					})
			},
			handleCreate() {
				this.dialogFormVisible = true
				this.$nextTick(() => {
					this.$refs['dataForm'].clearValidate()
				})
			},
			createData() {
				this.$refs['dataForm'].validate(valid => {
					if (valid) {
						sendMessage(this.dataForm)
							.then(res => {
								this.list.unshift(res.data.data)
								this.dialogFormVisible = false
								this.$notify.success({
									title: '成功',
									message: '创建成功'
								})
								this.getList()
							})
							.catch(res => {
								this.$notify.error({
									title: '失败',
									message: res
								})
							})
					}
				})
			},
			handleFilter() {
				this.listQuery.pageNum = 1
				this.getList()
			}
		}
	}
</script>
